<template>
  <div>
    <el-form label-position="top" ref="form" :model="form" >
      <el-form-item prop="id">
        <el-input type="hidden" v-model="form.id"></el-input>
      </el-form-item>
      <el-form-item label="动态内容" prop="content">
        <!--TODO 增加图片上传/解析-->
        <div id="vditor-content"></div>
      </el-form-item>


      <el-form-item>
        <el-switch
            v-model="form.isPublished"
            active-color="#13ce66"
            active-text="公开"
            style="margin-bottom: 20px;display: block">
        </el-switch>
      </el-form-item>



      <el-form-item style="text-align: right">
        <el-button type="primary" @click="onSubmit">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>


<script>
import Vditor from "vditor"
import "vditor/dist/index.css"

export default {
  name: "WriteMoment",

  data() {
    return {
      form: {
        id: null,
        content: '',
        isPublished: true,
        create_time:'',
        likes:0
      },
      ready: false,//markdown编辑器是否渲染好了
      contentWords: 0,
      vditorContent: null,
    }
  },
  methods: {
    onSubmit() {
      this.form.id=this.$route.params.id
      this.form.content = this.vditorContent.getValue();
      this.$http({
        url: (this.$route.params.id == null) ? '/moment/save' : '/moment/update',
        method: "post",
        data: this.form
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.$router.push('/moment_list')
          this.$message({
            message: (this.form.id == null) ? '新增动态成功' : '更新动态成功',
            type: 'success'
          });
        } else {
          this.$message({
            message: (this.form.id == null) ? '新增动态失败' : '更新动态失败',
            type: 'error'
          });
        }
      })

    },
    //初始化markdown编辑器
    initVditorContent() {
      const _this = this
      this.vditorContent = new Vditor("vditor-content",
          {
            height: 360,
            outline: {
              enable: true //显示大纲
            },
            cache: {//不缓存到localStorage
              enable: false,
            },
            resize: {
              enable: true //可调整高度
            },
            counter: {
              enable: true,
              after(count) {
                _this.contentWords = count;
              }
            },
            placeholder: "Vditor 是一款浏览器端的 Markdown 编辑器，支持所见即所得（富文本）、即时渲染（类似 Typora）和分屏预览模式",
            tab: "    ",
            after() {
                _this.getMoment();
            }

          }
      )
    },
    initVditor() {
      this.initVditorContent();
    },
    //获取要编辑的动态信息
    getMoment() {
      if (this.$route.params.id) {
        const id = this.$route.params.id;
        this.$http({
          url: `moment/${id}`,
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.form = data.data;
            this.vditorContent.setValue(this.form.content);
          }
        })
      } //else {
        // this.form = {}
        // this.vditorDescription.setValue('');
        // this.vditorContent.setValue('');
      //}

    }
  },
  mounted() {
    this.initVditor();
  },
  watch: {
    //如果路由有变化，会再次执行该方法
    $route: {
      handler: function () {
        this.form = {
          id: null,
          content: '',
          isPublished: true,
          create_time: '',
          likes: 0
        }
        this.ready = true;
        this.descriptionWords = 0
        this.contentWords = 0
        this.vditorContent.setValue('')
      },
      // // 深度观察监听
      // deep: true,
      // immediate: true
    }
  }

}
</script>
